<template>
  <div>
    <h1>抽奖表</h1>
  </div>
  <div>
    <el-button type="primary" @click="saveActive()">添加抽奖活动</el-button>
  </div>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="activeId" label="活动id" width="180" />
      <el-table-column prop="activeName" label="活动名称" width="180" />
      <el-table-column prop="beginTime" label="开始时间" width="180" />
      <el-table-column prop="endTime" label="结束时间" width="180" />
      <el-table-column prop="userFlag" label="参与用户" width="180">
        <template #default="scope">
          <span v-if="scope.row.userFlag == 0">全部</span>
          <span v-if="scope.row.userFlag == 1">部分</span>
        </template>
      </el-table-column>
      <el-table-column prop="freeTimes" label="免费次数" width="180" />
      <el-table-column prop="winFlag" label="中奖名单" width="180" />
      <el-table-column prop="winRecord" label="中奖记录" width="180">
        <template #default="scope">
          <span v-if="scope.row.winRecord == 0">公开</span>
          <span v-if="scope.row.winRecord == 1">不公开</span>
        </template>
      </el-table-column>
      <el-table-column prop="activeStatus" label="活动状态" width="180">
        <template #default="scope">
          <span v-if="scope.row.activeStatus == 0">开始</span>
          <span v-if="scope.row.activeStatus == 1">停止</span>
        </template>
      </el-table-column>
      <el-table-column prop="activeContent" label="活动内容" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" @click="updateEdit(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" @click="deleteId(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
const tableData = ref([]);
import { ActiveList, deleteById } from "@/api/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const searchForm = ref({
  pageSize: 3,
  pageNum: 1,
  keyWord: "",
});
const loadList = () => {
  ActiveList(searchForm.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("展示成功");
      tableData.value = res.data.data.records;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
onMounted(() => {
  loadList();
});
const router = useRouter();
const saveActive = () => {
  router.push("/home/saveView");
};
const updateEdit = (row: any) => {
  router.push("/home/updateView/" + row.activeId);
};
const deleteId = (row: any) => {
  deleteById(row.activeId).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("删除成功");
      loadList();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
</script>

<style scoped></style>
